import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { deleteVersion } from "@/store/version/versionAPI";
import { changeCreate, changeParams, getVersionAsync } from "@/store/version/versionSlice";
import { Button, Modal, Table } from "antd";
import type { TableProps } from "antd";
import type { ReactElement } from "react";
import { shallowEqual } from "react-redux";
import dayjs from '@/utils/dayjs'
import { TZ } from "@/utils/env";

export interface DataType {
  channel_val: number,
  download_path: string,
  id: number,
  release_time: number,
  upload_type: number,
  version: string
}

export default function MTable(): ReactElement<typeof Table, "table"> {
  const { config: { data: { data: { user_channel_list = [], version_path_type = [] } = {} } = {} } = {} } = useAppSelector(state => state.app, shallowEqual)
  const { params, table } = useAppSelector(
    (state) => state.version,
    shallowEqual
  );
  const dispatch = useAppDispatch();
  const columns: TableProps<DataType>["columns"] = [
    {
      title: '渠道',
      dataIndex: 'channel_val',
      key: 'channel_val',
      align: 'center',
      render: text => user_channel_list?.find?.(i => i.value === text)?.label
    },
    {
      title: '下载地址',
      dataIndex: 'download_path',
      key: 'download_path',
      align: 'center'
    },
    {
      title: '发布时间',
      dataIndex: 'release_time',
      key: 'release_time',
      align: 'center',
      render: text => dayjs.unix(text).tz(TZ).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '上传类型',
      dataIndex: 'upload_type',
      key: 'upload_type',
      align: 'center',
      render: text => version_path_type?.find?.(i => i.value === text)?.label
    },
    {
      title: '版本号',
      dataIndex: 'version',
      key: 'version',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'opt',
      key: 'opt',
      align: 'center',
      render: (_text, record) => {
        return <Button.Group size="small">
          <Button type="primary" ghost onClick={() => {
            dispatch(changeCreate({
              type: 'update',
              open: true,
              record
            }))
          }}>编辑</Button>
          <Button type="primary" danger onClick={() => {
            Modal.confirm({
              title: '确认删除吗？',
              onOk: () => new Promise<void>((resolve, reject) => {
                deleteVersion({version_id: record.id}).then(() => {
                  resolve()
                  dispatch(getVersionAsync({...params}))
                }).catch(reject)
              })
            })
          }}>删除</Button>
        </Button.Group>
      }
    }
  ];
  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.count,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getVersionAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.data || []}
      size="small"
      rowKey="id"
    />
  );
}
